<template>
	<div class="same_city_activity">
		<!-- 活动列表 -->
		<div class="content0" v-if="indexShow===0">
			<header>
				<div>
					<h2>活动管理</h2>
					<span>共{{ allData.length }}条记录</span>
				</div>
				<p @click="add_activity">
					<img src="../../../assets/images/manage/sameCity/addAct.png" alt="">
					<span>免费发活动</span>
				</p>
			</header>
			<div class="conditions">
				<div class="activity_status">
					<h5>活动状态：</h5>
					<p :class="{sel1:selCondition1===0}" @click="sel1(0)">全部</p>
					<p :class="{sel1:selCondition1===1}" @click="sel1(1)">未开始</p>
					<p :class="{sel1:selCondition1===2}" @click="sel1(2)">进行中</p>
					<p :class="{sel1:selCondition1===3}" @click="sel1(3)">已结束</p>
				</div>
				<div class="add_time">
					<h5>发布时间：</h5>
					<p :class="{sel1:selCondition2===0}" @click="sel2(0)">全部</p>
					<p :class="{sel1:selCondition2===1}" @click="sel2(1)">一周内</p>
					<p :class="{sel1:selCondition2===2}" @click="sel2(2)">一个月内</p>
					<p :class="{sel1:selCondition2===3}" @click="sel2(3)">三个月内</p>
					<el-date-picker style="width:235px;height:30px;margin-left:20px;" v-model="value1" :clearable="false" @change="selDate" type="daterange" range-separator="￣" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="activity_search">
					<h5>活动搜索：</h5>
					<el-input placeholder="活动主题" v-model="input1" clearable style="width:180px;margin:0 10px;"></el-input>
					<el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
				</div>
			</div>
			<div class="activity_lists" v-loading="loading">
				<div class="activity_list" v-for="(item,index) in allData" :key="index">
					<div class="left">
						<img src="../../../assets/images/abao/banner.jpg" alt="">
						<div class="act_infos">
							<h6>111111</h6>
							<div>活动</div>
							<p>2018-07-03 14:00发布&nbsp;&nbsp;&nbsp;&nbsp;报名人数：<span>0</span>人</p>
							<p>线上活动</p>
						</div>
					</div>
					<div class="right">
						<p style="color:#adda95;">进行中</p>
						<div>
							<p>
								<img src="../../../assets/images/manage/sameCity/edit.png" alt="" />
								<span>编辑</span>
							</p>
							<p>
								<img src="../../../assets/images/manage/sameCity/sign.png" alt="" />
								<span>报名</span>
							</p>
							<p>
								<img src="../../../assets/images/manage/sameCity/manage.png" alt="" />
								<span>管理</span>
							</p>
						</div>
					</div>
				</div>
				<div class="no_activity_list" v-if="noData">
					<img src="../../../assets/images/manage/sameCity/noData.png" alt="" />
					<p>没有筛选出符合条件的信息</p>
				</div>
			</div>
		</div>
		<!-- 发布新活动 -->
		<div class="content1" v-if="indexShow===1">
			<add-same-city @goBack="goBack" :data="this.data"></add-same-city>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	import addSameCity from './addSameCity'
	export default {
		name: 'same_city_activity',
		props: ['data'],
		data() {
			return {
				indexShow: 0,
				selCondition1: 0,
				selCondition2: 0,
				value1: '',
				input1: '',
				loading: false,
				allData: [],				
				page: 1,
				pageSize: 5,
			}
		},
		components: {
			addSameCity
		},
		computed: {
			objs() {
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				obj.user_product_id = this.data.id;
				obj.page = this.page;
				return obj;
			},
			noData() {
				if(this.allData.length > 0) {
					return false;
				} else {
					return true;
				}
			},
		},
		created() {

		},
		mounted() {
			this.getSameCity();
		},
		methods: {
			getSameCity() {								
				this.$axiosGet('/api/activity', {
					data: JSON.stringify(this.objs)
				}).then(res => {
					this.loading = true;
					if(res.status === 1) {
						this.allData = res.data;
						this.loading = false;
					}else if(res.status === 0){
						this.allData = [];
						this.loading = false;
					}
				})
			},
			sel1(id) {
				this.selCondition1 = id;
			},
			sel2(id) {
				this.selCondition2 = id;
				this.value1 = '';
			},
			selDate() {
				this.selCondition2 = 10;
			},
			add_activity() {
				this.indexShow = 1;
			},
			goBack(){
				this.goTop();
				this.indexShow = 0;
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.same_city_activity {
		.content0 {
			header {
				display: flex;
				justify-content: space-between;
				padding: 36px 25px 25px 66px;
				border-bottom: 1px solid #e0e0e0;
				>div {
					display: flex;
					align-items: flex-end;
					h2 {
						font-size: 32px;
						color: #333;
						margin-right: 32px;
					}
					span {
						font-size: 17px;
						color: #666;
					}
				}
				p {
					width: 120px;
					height: 40px;
					background: #3ca0ec;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					&:hover {
						opacity: .8;
					}
					img {
						width: 21px;
						height: 20px;
						margin-right: 5px;
					}
					span {
						font-size: 14px;
						color: #fff;
					}
				}
			}
			.conditions {
				width: 95%;
				height: 170px;
				margin: 12px auto 50px auto;
				padding: 25px 0 28px 0;
				border: 1px solid #e7ecf2;
				.activity_status,
				.add_time {
					display: flex;
					h5,
					p {
						font-size: 14px;
						color: #444;
						font-weight: 400;
						margin-left: 25px;
					}
					h5 {
						height: 30px;
						line-height: 30px;
					}
					p {
						width: 68px;
						height: 30px;
						line-height: 30px;
						cursor: pointer;
						&:hover {
							background: #EBEEF5;
						}
					}
					.sel1 {
						background: #0099e9;
						color: #fff;
						&:hover {
							background: #0099e9;
						}
					}
				}
				.add_time {
					margin: 12px 0 12px 0;
				}
				.activity_search {
					display: flex;
					align-items: center;
					h5 {
						font-size: 14px;
						color: #444;
						font-weight: 400;
						margin-left: 25px;
					}
				}
			}
			.activity_lists {
				.activity_list {
					width: 94%;
					height: 140px;
					margin: 20px auto 0 auto;
					border: 1px solid #dddde0;
					border-radius: 6px;
					display: flex;
					justify-content: space-between;
					padding: 16px 14px;
					.left {
						display: flex;
						>img {
							width: 186px;
							height: 110px;
						}
						.act_infos {
							text-align: left;
							margin: 0 19px;
							h6 {
								font-size: 15px;
								color: #444;
								font-weight: 400;
							}
							div {
								width: 44px;
								height: 18px;
								line-height: 18px;
								text-align: center;
								font-size: 15px;
								color: #64baf0;
								border: 1px solid #64baf0;
								border-radius: 6px;
								margin: 8px 0 12px 0;
							}
							p {
								font-size: 15px;
								color: #ababab;
								margin-top: 6px;
								span {
									color: #64baf0;
								}
							}
						}
					}
					.right {
						height: 110px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-end;
						>p {
							font-size: 15px;
						}
						>div {
							display: flex;
							p {
								display: flex;
								align-items: center;
								margin-left: 13px;
								cursor: pointer;
								&:hover {
									text-decoration: underline;
								}
								img {
									width: 15px;
									height: 17px;
									margin-right: 3px;
								}
								span {
									font-size: 15px;
									color: #666;
								}
							}
						}
					}
				}
				.no_activity_list {
					img {
						width: 85px;
						height: 86px;
						margin: 30px 0 20px 0;
					}
					p {
						font-size: 14px;
						color: #999;
					}
				}
			}
		}		
	}
</style>